import React from "react";
import classes from "./Meal.module.css";
import Counter from "../../UI/Counter/Counter";

/*
 *   食物组件
 * */
const Meal = (props) => {
  const { meal } = props;
  return (
    <div className={classes.Meal}>
      <div className={classes.ImgBox}>
        <img src={meal.img} alt="" />
      </div>
      <div style={{flex: 'auto'}}>
        <h2 className={classes.Title}>{meal.title}</h2>

        {props.noDesc ? null : <p className={classes.Desc}>{meal.desc}</p> }
        
        <div className={classes.PriceWrap}>
          <span className={classes.Price}>{meal.price}</span>
          <div>
            <Counter key={meal.id} meal={meal} />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Meal;
